<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>imageEditor</title>
        <link type="text/css" href="./css/tui-color-picker.css" rel="stylesheet">
        <link rel="stylesheet" href="./css/tui-image-editor.css">
        <style>
            @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
            html, body {
                height: 100%;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="tui-image-editor-container"></div>
        <script type="text/javascript" src="./js/fabric.js"></script>
        <script type="text/javascript" src="./js/tui-code-snippet.min.js"></script>
        <script type="text/javascript" src="./js/tui-color-picker.js"></script>
        <script type="text/javascript" src="./js/FileSaver.min.js"></script>
        <script type="text/javascript" src="./js/tui-image-editor.js"></script>
        <script type="text/javascript" src="./js/theme/white-theme.js"></script>
        <script type="text/javascript" src="./js/theme/black-theme.js"></script>
        <script>
         // Image editor
         var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
             includeUI: {
                 loadImage: {
                     path: 'img/sampleImage2.png',
                     name: 'SampleImage'
                 },
                 theme: blackTheme, // or whiteTheme
                 initMenu: 'filter',
                 menuBarPosition: 'right'
             },
             cssMaxWidth: 700,
             cssMaxHeight: 500,
             usageStatistics: false
         });
         window.onresize = function() {
             imageEditor.ui.resizeEditor();
         }
        </script>
    </body>
</html>